import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Divider, Card } from 'antd';
import Img from 'react-image';
import moment from 'moment';
import DescriptionList from '../../components/DescriptionList';
import globalConstant from '../../utils/globalConstant';


const { Description } = DescriptionList;


@connect(({ userManage, loading }) => ({
  userManage,
  loading: loading.models.userManage,
}))
@Form.create()
export default class ShowUserInfo extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userManage/info',
      payload: {
        id: this.props.data,
      },
    });
  }
  render() {
    const { userInfo } = this.props.userManage;
    return (
      <Card bordered={false} loading={this.props.loading}>
        <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
          <Description term="用户姓名">{userInfo.userName}</Description>
          <Description term="注册来源">{userInfo.regSource}</Description>
          <Description term="鉴权ID">{userInfo.authPId }</Description>
          <Description term="联系电话">{userInfo.userMobile}</Description>
          <Description term="联系地址">{userInfo.userAddr}</Description>
          <Description term="邮箱">{userInfo.userEmail}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="身份认证" style={{ marginBottom: 32 }}>
          <Description term="身份证号">{userInfo.userIdcard}</Description>
          <Description term="是否验证">{userInfo.isAuthed === true ? '已审核' : '未审核'}</Description>
          <Description term="审核人">{userInfo.auditorName}</Description>
          <Description term="审核时间">{moment(userInfo.auditorTime).format(globalConstant.dateFormat)}</Description>
        </DescriptionList>
        <DescriptionList size="large" title="身份照片" style={{ marginBottom: 32 }} col={2}>
          <Description term="身份证正面">
            <Img style={{ width: 170, height: 90 }} src={userInfo.idcardPhotoFront} />
          </Description>
          <Description term="身份证反面">
            <Img style={{ width: 170, height: 90 }} src={userInfo.idcardPhotoSide} />
          </Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="其他数据" style={{ marginBottom: 32 }}>
          <Description term="创建时间">{moment(userInfo.createTime).format(globalConstant.dateFormat)}</Description>
          <Description term="最后登陆时间">{moment(userInfo.loginTime).format(globalConstant.dateFormat)}</Description>
          <Description term="最后更改时间">{moment(userInfo.updateTime).format(globalConstant.dateFormat)}</Description>
        </DescriptionList>
        <Divider style={{ marginBottom: 32 }} />
        <DescriptionList size="large" title="地址列表" style={{ marginBottom: 32 }}>
          {
            userInfo.address && userInfo.address.map((item, key) => (
              <div key={key.toString()}>
                <Description>{item.completeAdd}</Description>
                <br />
              </div>
            ))
          }
        </DescriptionList>
      </Card>
    );
  }
}
